<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;">
      <el-input v-model="listQuery.keyWord" placeholder="请输入用户名/手机号" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 20px;" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :element-loading-text="g.loadingStr"
      :header-cell-style="{background:g.mainColor}"
    >
      <el-table-column label="序号" align="center" width="100px" fixed>
        <template slot-scope="{$index}">
          <span>{{ $index + 1 + ( listQuery.currentPage - 1 ) * listQuery.pageSize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户头像" align="center">
        <template slot-scope="{row}">
          <span><img :src="row.withdrawAccountImg" alt="" class="table-row-img"></span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.withdrawAccountName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提现机构" align="center">
        <template slot-scope="{row}">
          <span>{{ row.businessName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提现卡号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.withdrawCardNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="银行卡类型" align="center">
        <template slot-scope="{row}">
          <span>{{ row.bankCardName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提现金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.withdrawAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提现申请时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.withdrawTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="90px">
        <template slot-scope="{row}">
          <span>{{ row.status | withdrawStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center" width="90px">
        <template slot-scope="{row}">
          <span>{{ row.handlerName }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="240px">
        <template v-if="row.status === 2" slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleDetail(row,$index)">
            查看
          </el-button>
          <el-button type="primary" size="mini" @click="handleAgree(row,$index)">
            同意
          </el-button>
          <el-button type="danger" size="mini" @click="handleRefuse(row,$index)">
            拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getList" />

    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="1200px"
    >
      <el-table
        :key="detailTableKey"
        v-loading="detailListLoading"
        :data="detailList"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :element-loading-text="g.loadingStr"
        :header-cell-style="{background:g.mainColor}"
      >
        <el-table-column label="订单编号" align="center" width="200" fixed>
          <template slot-scope="{row}">
            <span>{{ row.orderNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.commodityName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="机构名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.businessName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template slot-scope="{row}">
            <span>{{ row.paymentPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" align="center" width="200">
          <template slot-scope="{row}">
            <span>{{ row.paymentTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.commodityAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实付金额" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.paidInAmount }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="detailTotal>0" :total="detailTotal" :page.sync="detailListQuery.currentPage" :limit.sync="detailListQuery.pageSize" @pagination="handleDetailGetList" />
    </el-dialog>

  </div>
</template>

<script>

import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { auditList, auditUpdate, auditDetail } from '@/api/audit'

export default {
  name: 'AuditList',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        keyWord: ''
      },

      dialogVisible: false,
      detailTableKey: 0,
      detailList: null,
      detailTotal: 0,
      detailListLoading: true,
      detailListQuery: {
        currentPage: 1,
        pageSize: 10,
        ids: []
      }
    }
  },
  created() {
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      auditList(this.listQuery).then(response => {
        console.log(response.data)
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    handleDetail(row, index) {
      this.dialogVisible = true

      this.detailListLoading = true
      this.detailListQuery.currentPage = 1
      this.detailListQuery.pageSize = 10
      this.detailListQuery.ids = row['withdrawOrderNo']
      auditDetail(this.detailListQuery).then(response => {
        console.log(response.data)
        this.detailList = response.data.records
        this.detailTotal = response.data.total
        this.detailListLoading = false
      })
    },
    handleDetailGetList() {
      this.detailListLoading = true
      auditDetail(this.detailListQuery).then(response => {
        console.log(response.data)
        this.detailList = response.data.records
        this.detailTotal = response.data.total
        this.detailListLoading = false
      })
    },
    handleAgree(row, index) {
      console.log(row)

      this.$confirm('是否确定同意该申请？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        auditUpdate(
          {
            id: row['id'],
            agree: true
          }
        ).then(response => {
          this.$message({ message: '操作成功', type: 'success' })
          this.getList()
        })
      }).catch(() => {

      })
    },
    handleRefuse(row) {
      console.log(row)
      this.$prompt('请输入拒绝理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        auditUpdate(
          {
            id: row['id'],
            agree: false,
            desc: value
          }
        ).then(response => {
          this.$message({ message: '操作成功', type: 'success' })
          this.getList()
        })
      }).catch(() => {

      })
    }
  }
}
</script>
